<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <title>颜色转换工具-本地版</title>
        <meta name="Robots" content="INDEX,FOLLOW">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../static/img/favicon.ico">
        <link rel="stylesheet" href="index.css?v=ac035687">
        <script type="text/javascript" src="../static/vendor/vue/vue.js?v=b6ac71fa"></script>
    </head>
    <body>
        <div class="wrapper" id="pageContainer">
            <div class="panel panel-default" style="margin-bottom: 0px;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
                            <img src="../static/img/fe-16.png" alt="fehelper" title="by zyl.参考版本v2020.05.2810">FeHelper
                        </a>
                        ：颜色转换工具
                    </h3>
                </div>
            </div>
            <div class="panel-body">
                <div class="row x-tips ui-mt-10">
                    // 支持颜色值的RGB（RGBA）与十六进制（HEX）色值之间的互转，eg：<br>
                    1、#43ad7f7f &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=> &nbsp;&nbsp;&nbsp;rgba(67, 173, 127, 0.50)<br>2、rgb(190,20,128) &nbsp;&nbsp;=> &nbsp;&nbsp;&nbsp;#be1480
                </div>
                <div class="row">
                    <h4>HEX转RGB：</h4>
                    <label for="fromHEX">HEX</label>
                    <input type="text" class="form-control col-input ui-mr-10" id="fromHEX" placeholder="如:#F2C685" maxlength="9" v-model="fromHEX" @input="colorHexToRgb">
                    <label>预览</label>
                    <div class="demo-color" :style="{background:fromHEX}">&nbsp;</div>
                    <label for="toRGB" class="x-xlabel">RGB</label>
                    <input type="text" class="form-control col-input" id="toRGB" readonly="readonly" v-model="toRGB">
                    <label>预览</label>
                    <div class="demo-color" :style="{background:toRGB}">&nbsp;</div>
                </div>
                <div class="row ui-mt-20">
                    <h4>RGB转HEX：</h4>
                    <label for="fromRGB">RGB</label>
                    <input type="text" class="form-control col-input ui-mr-10" id="fromRGB" placeholder="如:rgb(200,100,255)" maxlength="25" v-model="fromRGB" @input="colorRgbToHex">
                    <label>预览</label>
                    <div class="demo-color" :style="{background:fromRGB}">&nbsp;</div>
                    <label for="toHEX" class="x-xlabel">HEX</label>
                    <input type="text" class="form-control col-input" id="toHEX" readonly="readonly" v-model="toHEX">
                    <label>预览</label>
                    <div class="demo-color" :style="{background:toHEX}">&nbsp;</div>
                </div>
            </div>
        </div>
        <script src="../static/vendor/jquery/jquery-3.3.1.min.js?v=3a46a439"></script>
        <script type="text/javascript" src="index.js?v=68635f12"></script>
    </body>
</html>
